<script setup lang='ts'>
import { ref, reactive, provide } from 'vue';
import listAPI from '@/api/banner';
import { showLoadingToast, closeToast } from 'vant';
// import { Toast } from 'vant';

const emit = defineEmits();
const hasClicked = ref(false);
const listData = ref([]);
const loading = ref(false);
const finished = ref(false);

const queryParams = reactive({
    pageNum: 0,
    pageSize: 10,
});

const getList = () => {
    listAPI.getBannerList(queryParams)
        .then((data) => {
            // console.log('data', data);

            if (data.list.length == 0) {
                listData.value = [];
                finished.value = true;
                return;
            }

            data.list.forEach(item => {
                listData.value.push(item);
                console.log(listData.value);
            })
            loading.value = false;

            if (listData.value.length >= data.total) {
                finished.value = true;//结束加载
            }
        })
        .catch((err) => {
            console.log('err', err);
        })
        .finally(() => {
        });
}

const onLoad = async () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    try {
        await getList();
        queryParams.pageNum++;
    } catch (err) {
        console.log('err', err);
    }
};

const dianzan = (item: BannerItem) => {
    hasClicked.value = true;
    // console.log('item.id', item.id);
    // listAPI.UpdateBannerHot(item.id, item.hot).then((data) => {
    //     console.log('data', data);
    // })

    item.hot += 3;
    console.log('item.hot', item.hot);
    emit('msg-to-banner-tabs');
}


</script>

<template>
    <van-list class="banner-lists" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="banner-lists-item" v-for="item in listData" :key="item.id">
            <div class="banner-lists-item-img display-center">
                <div class="banner-lists-item-img-inner display-center">
                    <img src="https://img0.baidu.com/it/u=880327811,3470129125&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                        alt="banner-lists-item-img" />
                </div>
            </div>
            <div class="banner-lists-item-right">
                <div class="banner-lists-item-title">
                    <div class="banner-lists-item-title-text">{{ item.title }}</div>
                    <img class="title-img" src="@/assets/箭头@3x.png" alt="banner-lists-item-title-img" />
                </div>
                <div class="banner-lists-item-hot">
                    <img class="hot-img" src="@/assets/人气火苗@3x.png" alt="banner-lists-item-hot-img" />
                    <div class="banner-lists-item-hot-text">{{ item.hot }}人气值</div>
                </div>
                <div class="banner-lists-item-description">{{ item.description }}</div>
            </div>
            <div class="banner-lists-item-button" @click="dianzan(item)">
                <img class="button-img" src="@/assets/爱心@3x.png" alt="banner-lists-item-button-img" />
                <div class="banner-lists-item--button-text">点赞+3</div>
            </div>
        </div>
    </van-list>
</template>

<style scoped>
.banner-lists {
    width: 100%;
    height: 100%;
}

:deep(.van-list__finished-text) {
    color: white;
    font-size: 24px;
}

.display-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-lists-item {
    display: flex;
    position: relative;
    width: 702px;
    height: 253px;
    margin: 16px 24px 0;
    background-image: linear-gradient(182deg, #FFDCD0 0%, #FFF6F6 21%, #FFFFFF 100%);
    border: 1px solid #FFFFFF;
    border-radius: 24px;
    border-radius: 24px;
}

.banner-lists-item-img {
    width: 180px;
    height: 180px;
    margin: 33px 0 40px 24px;
    background-image: linear-gradient(180deg, #FFDCC4 0%, #FFB8A2 100%);
    border-radius: 24.36px;
    border-radius: 24.36px;

    .banner-lists-item-img-inner {
        width: 171.8px;
        height: 171.8px;
        background-image: linear-gradient(1deg, #FFF4ED 0%, #FF6373 100%);
        border-radius: 20.71px;
        border-radius: 20.71px;
    }

    img {
        width: 163.6px;
        height: 163.6px;
        background: #FFFFFF;
        border-radius: 17.05px;
        border-radius: 17.05px;
    }
}

.banner-lists-item-right {
    margin-top: 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 20px;
}

.banner-lists-item-title {
    /* width: 192px; */
    /* height: 45px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;


    .banner-lists-item-title-text {
        max-width: 256px;
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        line-height: 45px;
        font-weight: bold;
        color: #262626;
        letter-spacing: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        word-break: break-all;
    }

    .title-img {
        margin-left: 8px;
        width: 16px;
        height: 16px;
    }
}

.banner-lists-item-hot {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 16px 0;

    .banner-lists-item-hot-text {
        /* width: 140px; */
        margin-left: 4px;
        height: 33px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        line-height: 33px;
        color: #F7423A;
        letter-spacing: 0;
    }

    .hot-img {
        width: 20px;
        height: 20px;

    }
}

.banner-lists-item-description {
    font-family: PingFangSC-Regular;
    width: 434px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    font-size: 24px;
    color: #BA7E50;
    line-height: 38px;
    /* word-break: break-all; */
}

.banner-lists-item-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 28px;
    right: 28px;
    width: 152px;
    height: 68px;
    background-image: linear-gradient(0deg, #FFD3D3 0%, #FFF7F7 100%);
    border: 1px solid #FFFFFF;
    box-shadow: 0 7px 10px 0 rgba(255, 212, 204, 0.93);
    border-radius: 34px;
    border-radius: 34px;

    .button-img {
        width: 54px;
        height: 54px;
        margin: 7px 0 7px 8px;
    }

    .banner-lists-item--button-text {
        font-size: 24px;
        color: #F02B22;
        line-height: 68px;
    }
}
</style>
